<template>
	<view class="main">
		<view class="item" v-for="item in 10" :key="item"
			@click="$goUrl(`/subPackage/teacher/teacherDetail?id=${item}`)">
			<view class="item-box">
				<view class="top-box dispaly">
					<view class="avatar">
						<image
							src="https://img2.baidu.com/it/u=3853345508,384760633&amp;fm=253&amp;app=120&amp;size=w931&amp;n=0&amp;f=JPEG&amp;fmt=auto?sec=1689958800&amp;t=210689b7eb06d7c78958d7063151cba6"
							mode="aspectFill"></image>
					</view>
					<view class="desc">
						<view class="desc-top dispaly-center">
							<view class="name">刘子</view>
							<view class="lv">高级服装师</view>
						</view>
						<view class="detail over-2">西服定制量身定做高级手工商务休 闲套装西服定制量身定做高级闲套装西服定制量身定做高级闲套装西服定制量身定做高级</view>

					</view>
				</view>
				<view class="order dispaly-just-between">
					<view class="order-left dispaly-center">
						<view class="o-title">服务订单</view>
						<view class="num">216单</view>
					</view>
					<view class="">
						<view class="order-right dispaly-align-center"
							@click.stop="$goUrl('/subPackage/index/submitCustomized')">去定制</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.main {
		.item:last-child {
			margin-bottom: 0;
		}

		.item {
			padding: 24rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 16rpx;

			.item-box {
				.top-box {
					.avatar {
						margin-right: 10rpx;

						image {
							width: 200rpx;
							height: 160rpx;
							border-radius: 20rpx;
						}
					}

					.desc {
						.desc-top {
							.name {
								font-family: Source Han Sans, Source Han Sans;
								font-weight: 500;
								font-size: 32rpx;
								color: #020121;
								margin-right: 10rpx;
							}

							.lv {
								font-family: Source Han Sans, Source Han Sans;
								font-weight: 500;
								font-size: 20rpx;
								color: #FFFFFF;
								padding: 6rpx 10rpx;
								background: #020121;
								border-radius: 8rpx;
							}
						}

						.detail {
							margin-top: 10rpx;
							font-family: Source Han Sans, Source Han Sans;
							font-weight: 400;
							font-size: 28rpx;
							color: #7B7B89;
							line-height: 40rpx;
						}
					}
				}

				.order {
					margin-top: 16rpx;

					.order-right {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 500;
						font-size: 28rpx;
						color: #FFFFFF;
						position: relative;
						width: 216rpx;
						height: 80rpx;
						background: linear-gradient(330deg, #020121 0%, #7B7B89 99%);
						border-radius: 10rpx;
						padding-left: 33rpx;
					}

					.order-right::after {
						content: '';
						position: absolute;
						border-left: 81rpx solid transparent;
						border-right: 81rpx solid transparent;
						border-top: 81rpx solid #fff;
						left: -50px;
					}

					.order-left {
						.o-title {
							font-family: Source Han Sans, Source Han Sans;
							font-weight: 400;
							font-size: 28rpx;
							color: #7B7B89;
						}

						.num {
							font-family: Source Han Sans, Source Han Sans;
							font-weight: 500;
							font-size: 28rpx;
							color: #020121;
						}
					}
				}
			}
		}
	}
</style>